<template>
	<view style="height: 100%; padding-top: 2%; background-color: #F1F1F3; padding-bottom: 5%;" >
		<view class="user-name">
			<text><span style="color: red;">*</span> 姓名</text>
			<input v-model="approval.userName" :disabled="approval.step!=0" type="text" placeholder="请输入">
		</view>
		<view class="user-phone">
			<text><span style="color: red;">*</span> 本人联系电话</text>
			<input v-model="approval.phone" :disabled="approval.step!=0" type="number" placeholder="请输入 ">
		</view>
		<view class="user-reason">
			<text><span style="color: red;">*</span> 请假事由</text>
			<u--textarea v-model="approval.reason" :disabled="approval.step!=0"  border="none" placeholder="请输入内容" count ></u--textarea>
		</view>
		<view class="select-time">
			<view  @click="isShow()">
				<text><span style="color: red;">*</span> 外出时间</text>
				<view style="padding-top: 10rpx; padding-right: 10rpx; padding-bottom: 10rpx;">
					<uni-datetime-picker :disabled="approval.step!=0"  v-model="approval.startTime"/>
				</view>
			</view>
			<view>
				<text><span style="color: red;">*</span> 返回时间</text>
				<view style="padding-top: 10rpx; padding-right: 10rpx; padding-bottom: 10rpx;">
					<uni-datetime-picker :disabled="approval.step!=0"  v-model="approval.endTime"/>
				</view>
			</view>
		</view>
		
		<view class="arrival-place">
			<text><span style="color: red;">*</span> 家庭地址</text>
			<view class="province">
				<text>省份:</text>
				<view style="margin-left: 4%; width: 80%;">
					<uni-combox style="width: 80%; border: none;" :disabled="approval.step!=0" :candidates="provinceNameList" placeholder="省份" v-model="homeProvinceValue" @input="getHomeProvince()"></uni-combox>
				</view>
			</view>
			<view class="street">
				<text>城市</text>
				<view style="width: 80%;">
					<uni-combox style="width: 80%; border: none;" :disabled="approval.step!=0" :candidates="cityNameList" placeholder="城市" v-model="homeCityValue" @input="getHomeCity()"></uni-combox>
				</view>
			</view>
			<view style="margin-top: 2%;">
				<u--textarea v-model="approval.homeAddress" :disabled="approval.step!=0" placeholder="详细地址" ></u--textarea>
			</view>
		</view>
		
		<view class="arrival-place">
			<text><span style="color: red;">*</span>外出地点</text>
			<view class="province">
				<text>省份:</text>
				<view style="margin-left: 4%; width: 80%;">
					<uni-combox  :disabled="approval.step!=0" style="width: 80%; border: none;" :candidates="provinceNameList" placeholder="省份" v-model="arrivalProvinceValue" @input="getArrivalProvince()"></uni-combox>
				</view>
			</view>
			<view class="street">
				<text>城市:</text>
				<view style=" width: 80%;">
					<uni-combox style="width: 80%; border: none;" :disabled="approval.step!=0" :candidates="cityNameList" placeholder="省份" v-model="arrivalCityValue" @input="getArrivalCity()"></uni-combox>
				</view>
			</view>
			<view style="margin-top: 2%;">
				<u--textarea v-model="approval.arrivalAddress" :disabled="approval.step!=0" placeholder="详细地址" ></u--textarea>
			</view>
		</view>
		<view class="tips">
			本人承诺：<br/>
			1.以上填报的各项信息真实准确，已向家长告知外出安排，家长完全知情并同意；<br/>
			2.外出期间自觉遵守国家法律法规、校纪校规和各地防控工作规定及要求，做好个人防护，每天做好健康监测，自觉注意人身及财产安全，身体如有不适立即向学校报告，及时就医。<br/>
			3.返校前提前24小时向学院报备，返校后主动销假，并根据玉林市相关规定进行健康管理。
		</view>
		
		<view class="process">
				<u-steps :current="approval.step" direction="column">
					<u-steps-item :title="approval.userName" :desc="approval.createDate">
					</u-steps-item>
					<u-steps-item :title="approval.secondStepUserName" :desc="approval.secondStepDate">
					</u-steps-item>
					<u-steps-item :title="approval.thirdStepUserName" :desc="approval.thirdStepDate"></u-steps-item>
				</u-steps>
		</view>
		
		<view class="submit" v-if="approval.step === 0" @click="submit()">
			<button>提交</button>
		</view>
		<view class="pass" v-if="(approval.step === 1&&userRole!=0) || (approval.step === 2&&userRole>1) ">
			<button @click="pass()">同意</button>
			<button @click="refuse()">拒绝</button>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				provinceNameList:[],
				provinceList:[],
				cityNameList:[],
				cityList:[],
				homeProvinceValue:'',
				homeCityValue:'',
				arrivalProvinceValue:'',
				arrivalCityValue:'',
				show:false,
				approval:{
					userId:0,
					userName:'',
					phone:'',
					step:0,
					homeCityId:0,
					arrivalCityId:0,
					homeAddress:'',
					arrivalAddress:'',
					startTime:'',
					endTime:'',
					secondStepDate:'',
					thirdStepDate:'',
					reason:'',
					secondStepUserName:'',
					thirdStepUserName:'',
					result:0,
				},
				user:{},
				toast:{
					type:'success',
					title:'成功',
					message:'提交成功',
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png',
					url:'/pages/workbench/index'
				},
				userRole:0,
			}
		},
		onLoad(options) {
			console.log(options)
			this.getApproval(options.id)
			this.user = uni.getStorageSync('user')
			this.approval.userId = this.user.id
			uni.request({
				url:'http://localhost:8090/nailCampus/province/getAllProvince',
				method:'GET',
				success:res=>{
					this.provinceList = res.data.data
					this.provinceList.forEach(item=>{
						this.provinceNameList.push(item.pname)
					})
				}
			})
			uni.request({
				url:'http://localhost:8090/nailCampus/user/getRole',
				method:'GET',
				header:{
					"token":uni.getStorageSync('token')
				},
				success:res=>{
					this.userRole = res.data.data
				}
			})
		},
		methods: {
			getArrivalCity(){
				for(let i = 0;i<this.cityList.length;i++){
					if(this.arrivalCityValue == this.cityList[i].name){
						this.approval.arrivalCityId = this.cityList[i].id
					}
				}
			},
			getArrivalProvince(){
				for(let i = 0;i<this.provinceList.length;i++){
					if(this.provinceList[i].pname == this.arrivalProvinceValue){
						this.cityList = this.provinceList[i].cityList
						this.cityNameList.length = 0
						this.cityList.forEach(item=>{
							this.cityNameList.push(item.name)
						})
					}
				}
			},
			getHomeCity(){
				for(let i = 0;i<this.cityList.length;i++){
					if(this.homeCityValue == this.cityList[i].name){
						this.approval.homeCityId = this.cityList[i].id
					}
				}
			},
			getHomeProvince(){
				for(let i = 0;i<this.provinceList.length;i++){
					if(this.provinceList[i].pname == this.homeProvinceValue){
						this.cityList = this.provinceList[i].cityList
						this.cityNameList.length = 0
						this.cityList.forEach(item=>{
							this.cityNameList.push(item.name)
						})
					}
				}
			},
			getApproval(id){
				if(id!=null){
					uni.request({
						url:'http://localhost:8090/nailCampus/approval/getApprovalById/'+id,
						method:'GET',
						success:res=>{
							this.approval = res.data.data
							console.log(res.data.data)
							console.log(this.approval)
							this.homeCityValue = res.data.data.homeCityName
							this.homeProvinceValue = res.data.data.homeProvinceName
							this.arrivalProvinceValue = res.data.data.arrivalProvinceName
							this.arrivalCityValue = res.data.data.arrivalCityName
						}
					})
				}
			},
			showToast(params) {
				this.$refs.uToast.show({
					...params,
					complete() {
						params.url && uni.reLaunch({
							url: params.url
						})
					}
				})
			},
			isShow(){
				this.show = true;
			},
			submit(){
				uni.request({
					url:'http://localhost:8090/nailCampus/approval/saveApproval',
					method:'POST',
					data:this.approval,
					success:res=>{
						this.showToast(this.toast)
					}
				})
				
			},
			pass(){
				if(this.approval.step===2){
					this.approval.result = 1
				}
				this.approval.step = this.approval.step+1
				uni.request({
					url:'http://localhost:8090/nailCampus/approval/updateApproval',
					method:'POST',
					header:{
						"token":uni.getStorageSync('token')
					},
					data:this.approval,
					success:res=>{
						this.toast.message = '处理成功'
						this.toast.url = ''
						this.showToast(this.toast)
					}
				})
			},
			refuse(){
				this.approval.result = 2
				this.approval.step = this.approval.step+1
				uni.request({
					url:'http://localhost:8090/nailCampus/approval',
					method:'POST',
					data:this.approval,
					success:res=>{
						this.toast.message = '处理成功'
						this.toast.url = ''
						this.showToast(this.toast)
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.user-name{
		padding-top: 2%;
		padding-left: 2%;
		padding-right: 2%;
		margin-top: 2%;
		background-color: white;
		height: 50px;
	}
	.user-phone{
		padding-top: 2%;
		padding-left: 2%;
		padding-right: 2%;
		margin-top: 4%;
		background-color: white;
		height: 50px;

	}
	.user-reason{
		padding-top: 2%;
		padding-left: 2%;
		padding-right: 2%;
		margin-top: 4%;
		background-color: white;
	}
	.select-time{
		margin-top: 4%;
		padding-left: 2%;
		padding-top: 2%;
		background-color: white;	
	}
	.arrival-place{
		background-color: white;
		padding-left: 2%;
		padding-top: 2%;
		margin-top: 4%;
		padding-bottom: 2%;
		.province{
			display: flex;
			text{
				margin-top: 2%;
			}
		}
		.street{
			display: flex;
			text{
				padding-right: 5%;
				margin-top: 2%;
			}
		}
	}
	.tips{
		padding: 2%;
		font-size: 27rpx;
		color: #b2b2b3;
	}
	.process{
		margin-top: 2%;
		background-color: white;
		padding: 2%;
	}
	.submit{
		margin-top: 2%;
		padding: 3%;
		button{
			background-color: #0080ff;
			color: white;
		}
		button:active{
			background-color: #509cff;
		}

	}
	.pass{
		display: flex;
		margin-top: 2%;
		padding: 3%;
		button{
			width: 30%;
			line-height: 90rpx;
			font-size: 35rpx;
			height: 90rpx;
			background-color: #0080ff;
			color: white;
		}
		button:active{
			background-color: #509cff;
		}
	}


</style>
